<template>
  <div>
    <h1>TodoListDemo</h1>

    <!-- <input type="text" v-model="task" @keyup.enter="addTask()"/>
    <button @click="addTask()">添加</button> -->
    <!-- <ul>
      <li v-for="(item,index) in list" :key="item">
        {{ item }}
        <button @click="deleteTask(index)">删除</button>
      </li>
    </ul> -->

    <DataAdder @addTask="addTask"></DataAdder>
    <DataLister :list="datalist"></DataLister>
  </div>
</template>

<script>
import DataAdder from "@/components/DataAdder.vue";
import DataLister from "@/components/DataLister.vue";

export default {
  name: "Home",
  /* 注册局部组件 */
  components: {
    DataAdder,
    DataLister,
  },
  data() {
    return {
      // task: "aaa",
      datalist: [],
    };
  },
  methods: {
    addTask(eventData) {
      console.log("eventData=",eventData);
      this.datalist.push(eventData);
    },
    deleteTask(index) {
      this.datalist.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>